<template>
    <div class="chat-container">
      <div ref="chatMessages" class="chat-messages">
        <div v-for="(message, index) in messages" :key="index" :class="message.isUser? 'user-message' : 'bot-message'">
            <template v-if="message.isUser">
          <div class="message-content">
            {{ message.text }}
            <icon-message class="user-icon" />
          </div>
        </template>
        <template v-else>
          <div class="message-content">
            <icon-robot class="bot-icon" />
            {{ message.text }}
          </div>
        </template>
        </div>
      </div>
      <div class="chat-input">
        <a-textarea
          v-model="userInput"
          :auto-size="{
            minRows: 2,
            maxRows: 5
          }"
          class="input-textarea"
          placeholder="询问问题吧"
        />
        <a-button type='primary' shape="round" @click="handleQuestion" class="send-button">发送</a-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, nextTick } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import axios from 'axios'; // 引入 axios

  // 存储对话消息的数组
  const messages = ref([]);
  // 创建一个响应式变量来存储用户输入
  const userInput = ref('');
  // 获取聊天消息容器的引用
  const chatMessages = ref(null);

  // 预设问答
  const presetQuestions = {
    "axiom是什么？": "Axiom（也称为Group 72）是一个自2008年以来活跃的高级持续性威胁（APT）组织，被认为与中国有关并可能得到国家赞助。该组织以信息盗窃和16为目的，主要针对制造业、工业、航空、国防和媒体等具有高价值知识产权的高知名度组织。Axiom特别关注美国、日本、台湾和韩国的机构。他们使用的技术包括水坑攻击、鱼叉式网络钓鱼和其他基于网络的策略。该组织与APT 17、Deputy Dog、Elderwood、Sneaky Panda以及APT 20、Violin Panda可能有关联。Axiom曾负责针对全球多家财富500强公司、记者、环保组织、亲民主团体、软件公司、学术机构和政府机构的复杂网络16。",
    "这个组织最常使用的VPS服务商？": "Axiom最常使用的VPS服务商是IT7 Networks Inc。IT7 Networks inc是一家成立于2004年的加拿大网络公司，位于加拿大不列颠哥伦比亚省。IT7 Networks inc主要提供网络托管服务，在美国和欧洲有多个子品牌，国内非常出名的搬瓦工VPS就是他家的VPS品牌。"
  };

  // 处理提问的函数
  const handleQuestion = async () => {
    if (!userInput.value.trim()) {
      Message.warning('请输入内容');
      return;
    }
    // 添加用户消息到消息数组
    messages.value.push({
      text: userInput.value,
      isUser: true
    });

    let botAnswer;
    // 检查是否为预设问题
    if (presetQuestions[userInput.value]) {
      botAnswer = presetQuestions[userInput.value];
    } else {
      try {
        // 发送请求到后端 API
        const response = await axios.post('http://localhost:5001/api/chat', {
          prompt: userInput.value
        });

        // 获取后端返回的回答
        botAnswer = response.data.response;
      } catch (error) {
        console.error('请求出错:', error);
        // 如果请求出错，显示默认提示
        botAnswer = '服务器繁忙，请稍后重试';
      }
    }

    // 增加 2 秒延迟
    await new Promise(resolve => setTimeout(resolve, 2000));

    // 添加机器人回答到消息数组
    messages.value.push({
      text: botAnswer,
      isUser: false
    });

    // 清空用户输入
    userInput.value = '';

    // 确保 DOM 更新后滚动到最底部
    nextTick(() => {
      if (chatMessages.value) {
        chatMessages.value.scrollTop = chatMessages.value.scrollHeight;
      }
    });
  };
  </script>
  
  <style scoped>
  .chat-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
  }
  
  .chat-input {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #2c2c2d;
    border-top: 1px solid #e0e0e0;
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
  
  .input-textarea {
    flex: 1;
    margin-right: 10px;
  }
  
  .send-button {
    min-width: 80px;
  }
  
  .user-message {
    text-align: right;
    margin-bottom: 10px;
  }
  
  .bot-message {
    text-align: left;
    margin-bottom: 10px;
  }
  
  .message-content {
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .user-message .message-content {
    background-color: #007bff;
    color: white;
  }
  
  .bot-message .message-content {
    background-color: #e1e1e1;
    color: #333;
  }
  
  :deep(.arco-textarea) {
    background-color: #4f4f50;
    
    color: rgb(var(--gray-1));
    border: 1px solid #4f4f50;
    
  }
  </style>